<template>
	<div class="slider" ref="slider">
		<div class="slider-group" ref="sliderGroup">
			<slot>
			</slot>
		</div>
		<div class="dots">
			<!--span class="dot" :class="{active: currentPageIndex === index }" v-for="(item, index) in dots"></span-->
			<span class="dot" v-for="(item,index) in dots" :class="{active: currentPageIndex === index}"></span>
		</div>
	</div>
</template>

<script>
//引入better-scroll
import BScroll from 'better-scroll'
//引入自己封装的Dom操作函数
import {addClass} from '../../common/js/dom'
export default {
	data() {
		return {
			dots: [],					//当前小圆点
			currentPageIndex: 0,		//当前是第几页 
		}
	},
	props: {
		loop: {							//是否可以循环轮播
			type: Boolean,
			default: true
		},
		autoplay: {						//是否自动轮播
			type: Boolean,
			default: true
		},
		interval: {						//轮播间隔
			type: Number,
			default: 4000
		}
	},
	components: {},
	mounted() {
		//推迟20毫秒，保证dom的正确渲染。浏览器刷新时间一般17毫秒
		setTimeout(() => {
			this._setSliderWidth()
			this._initDots()
			this._initSlider()
			if(this.autoplay){
				this._play()
			}
		}, 40)
		//监听窗口大小改变事件
		window.addEventListener('resize', ()=>{
			if(!this.slider) return
			//重新计算dom元素宽度
			this._setSliderWidth(true)
			this.slider.refresh()
		})
	},
	methods: {
		//设置slider的宽度，才能横向滚动
		_setSliderWidth(isResize){
			//获取sliderGroup子元素个数
			this.children = this.$refs.sliderGroup.children
			//sliderGroup的宽度
			let width = 0			
			//父元素的宽度（屏幕宽度）
			let sliderWidth = this.$refs.slider.clientWidth
			//遍历子元素
			for(let i = 0; i < this.children.length; i++ ){
				let child = this.children[i]
				//给子元素添加类名,
				addClass(child, 'slider-item')
				//给每个child设置宽度
				child.style.width = sliderWidth + 'px'
				//当前元素总宽度
				width += sliderWidth
			}
			
			//如果是循环播放的,再前后都需要复制两个元素，所以需要加宽
			//resize窗口改变过来的不能加宽
			if(this.loop && !isResize){
				width += 2*sliderWidth
			}
			//给sliderGroup的宽度赋值
			this.$refs.sliderGroup.style.width = width + 'px'
		},
		//初始化dots(小圆点)
		_initDots(){
			this.dots = new Array(this.children.length)
		},
		//初始化slider
		_initSlider(){
			this.slider = new BScroll(this.$refs.slider, {
				scrollX: true,
				scrollY: false,
				momentum: false,				//惯性
				snap: {
					loop: this.loop,			//循环
          			threshold: 0.3,
          			speed: 400
				},
				bounce: false,					//反弹
        		stopPropagation: true,
				click: true,						//允许点击
			})
			//绑定一个事件,获取当前现实的是第几个子元素
			this.slider.on('scrollEnd', ()=> {
				let pageIndex = this.slider.getCurrentPage().pageX
				//当前第几个元素
				this.currentPageIndex = pageIndex
				//清除之前的定时器
				if(this.autoplay){
					clearTimeout(this.timer)
					this._play()
				}
			})
		},
		//自动播放
		_play(){
			// let pageIndex = this.pageIndex
			clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				this.slider.next()
			}, this.interval)
		}
	},
	destroyed(){
		//清掉计时器
		clearTimeout(this.timer)
	}
}
</script>
<style  lang="less" scoped>
	@import "../../common/less/variable";

	.slider{
		min-height: 1px;
		max-width:100%;
		overflow:hidden;
		.slider-group{
			position: relative;
			overflow: hidden;
			white-space: nowrap;
			.slider-item{
				float: left;
				box-sizing: border-box;
				overflow: hidden;
				text-align: center;
				a{
					display: block;
					width: 100%;
					overflow: hidden;
					text-decoration: none;
				}
				img{
					display: block;
					width: 100%;
				}
			}
		}
		.dots{
			position: absolute;
			right: 0;
			left: 0;
			bottom: 12px;
			text-align: center;
			font-size: 0;
			.dot{
				display: inline-block;
				margin: 0 4px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: @color-text-l;
				&.active{
					width: 20px;
					border-radius: 5px;
					background: @color-text-ll;
				}
			}
		}
	}
</style>
